<template>
	<fui-row class="daterange-wrapper hyy-class">
		<fui-col :span="11" class="daterange-start">
			<text @click="onStart">{{sTime || '开始日期'}}</text>
		</fui-col>
		<fui-col :span="2" class="daterange-to">
			<text> 至 </text>
		</fui-col>
		<fui-col :span="11" class="daterange-end">
			<text @click="onEnd"> {{eTime || '结束日期'}} </text>
		</fui-col>
	</fui-row>
	<fui-bottom-popup :show="show">
		<view class="fui-scroll__wrap">
			<view class="fui-calendar-title">请选择日期</view>
			<fui-calendar :value="dateValue" type="3" :isMultiple="false" showBtn @change="changeDate"></fui-calendar>
			<view class="fui-icon__close" @click.stop="closePopup">
				<fui-icon name="close" :size="48"></fui-icon>
			</view>
		</view>
	</fui-bottom-popup>
</template>

<script>
	export default {
		props: {
			startTime: {
				type: String,
				default: ''
			},
			endTime: {
				type: String,
				default: ''
			},
		},
		computed: {
			dateValue() {
				console.log(this.sTime, this.eTime);
				if (this.sTime && this.eTime) {

					return [this.sTime, this.eTime]
				}
				return []
			},
			sTime() {
				console.log(this.startTime);
				return this.startTime || (this.time.length ? this.time[0] : '')
			},
			eTime() {
				return this.endTime || (this.time.length ? this.time[1] : '')
			}

		},
		data() {
			return {
				show: false,
				time: []
			}
		},
		emits: ['update:modelValue'],
		methods: {
			onStart() {
				this.show = true
			},

			onEnd() {
				this.show = true
			},

			changeDate(data) {
				console.log(data);
				// this.$emit('update:modelValue', )
				if (data.week[0] && data.week[1]) {

					this.time = data.value
					this.$emit('change', data.value)
					this.closePopup()
				} else {
					this.fui.toast('请选择日期')
				}

			},
			closePopup() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-scroll__wrap {
		padding-top: 30rpx;
		position: relative;
	}

	.fui-calendar-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 24rpx;
	}

	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
	}

	.daterange {
		&-wrapper {
			// width: 686rpx;
			height: 84rpx;
			line-height: 84rpx;
			background: #f3f3f3;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
		}

		&-start,
		&-to,
		&-end {
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.26);
		}

		&-start {}

		&-to {
			color: rgba(0, 0, 0, 0.9);
		}

		&-end {}
	}
</style>